<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      title="用户信息"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 选择图像文件路径   表单属性hidden 隐藏  点击头像手动触发文件路径-->
    <!--监听文件的change事件 一旦变化触发onchange  参与dom ref-->
    <input type="file" hidden ref="file" @change="onFileChange" />

    <!-- 头像 -->
    <van-cell
      class="photo-cell"
      title="头像"
      is-link
      center
      @click="$refs.file.click()"
    >
      <van-image class="avatar" fit="cover" round :src="user.photo" />
    </van-cell>
    <!-- 头像 -->
    <!--  left-arrow 左箭头  is-link常用箭头 -->

    <!-- 昵称 -->
    <van-cell
      title="昵称"
      @click="isUpdaNameShow = true"
      :value="user.name"
      is-link
    ></van-cell>
    <!-- 昵称 -->

    <!-- 生日 -->
    <van-cell
      title="生日"
      :value="user.birthday || '1977-00-00'"
      is-link
      @click="isUpdaBirthdayShow = true"
    />
    <!-- 生日 -->

    <!-- 性别 -->
    <van-cell
      title="性别"
      :value="user.gender === 0 ? '男' : '女'"
      is-link
      @click="isUpdaGenderShow = true"
    ></van-cell>
    <!-- 性别 -->

    <!-- 编辑名称弹出层   给昵称绑定点击事件让弹出层打开-->
    <van-popup style="height: 100%" v-model="isUpdaNameShow" position="bottom">
      <update-name
        v-if="isUpdaNameShow"
        v-model="user.name"
        @close="isUpdaNameShow = false"
      />
      <!-- 设置v-if是每次重新进行渲染  当你点击取消时候就不渲染该标签内容 -->
      <!-- 父组件监听      v-model 绑定  子组件props接收value属性内容-->
    </van-popup>
    <!-- 编辑名称 -->

    <!-- 编辑性别 -->
    <van-popup v-model="isUpdaGenderShow" position="bottom">
      <update-gender
        v-if="isUpdaGenderShow"
        v-model="user.gender"
        @close="isUpdaGenderShow = false"
      />1234
      <!-- 设置v-if是每次重新进行渲染  当你点击取消时候就不渲染该标签内容 -->
      <!-- 父组件监听      v-model 绑定  子组件props接收value属性内容-->
    </van-popup>
    <!-- 编辑性别 -->

    <!-- 编辑生日 -->

    <!-- 设置v-if是每次重新进行渲染  当你点击取消时候就不渲染该标签内容 -->
    <!-- 父组件监听      v-model 绑定  子组件props接收value属性内容-->
    <van-popup v-model="isUpdaBirthdayShow" position="bottom">
      <update-birthday
        v-if="isUpdaBirthdayShow"
        v-model="user.birthday"
        @close="isUpdaBirthdayShow = false"
      />
    </van-popup>
    <!-- 编辑生日 -->

    <!-- 编辑图像 -->
    <van-popup v-model="isUpdaPhotoShow" position="bottom" style="height: 100%">
      <update-photo
        v-if="isUpdaPhotoShow"
        :img="img"
       @close="isUpdaPhotoShow=false"
       @update-photo="user.photo=$event"
      />
    </van-popup>
    <!-- 编辑图像 -->
  </div>
</template>

<script>
import { getUserProfile } from "@/api/user";
import UpdateName from "./components/update-name.vue";
import UpdateGender from "./components/update-gender.vue";
import UpdateBirthday from "./components/update-birthday.vue";
import UpdatePhoto from "./components/update-photo.vue";
export default {
  name: "UserProfile",
  data() {
    return {
      user: {}, //用户信息
      isUpdaNameShow: false, //默认昵称弹出层关闭
      isUpdaGenderShow: false, //默认性别弹出层关闭
      isUpdaBirthdayShow: false, //日期弹层
      isUpdaPhotoShow: false, //图像弹层
    };
  },
  components: {
    UpdateName,
    UpdateGender,
    UpdateBirthday,
    UpdatePhoto,
    img: null, //预览的图片
  },
  created() {
    this.loadProfile(); //调用获取用户信息方法
  },

  methods: {
    async loadProfile() {
      try {
        const { data } = await getUserProfile();
        this.user = data.data;
        console.log(data);
      } catch (err) {
        this.$toast("获取数据失败");
      }
    },

    onFileChange() {
      // 获取文件对象
      const file = this.$refs.file.files[0];
      // 基于文件对象获取blob图片数据
      // 把文件对象传递进来
      // window.URL.createObjectURL(file);
      // this.img=data
      // 把文件设置给img
      this.img = window.URL.createObjectURL(file);
      // console.log(data);
      // 展示预览图片弹出层
      this.isUpdaPhotoShow = true;
      // file-input如果选了同一个文件不会触发change事件
      // 解决办法  每次使用完毕把value清空
      this.$refs.value=''
    },
  },
};
</script>

<style scoped lang='less'>
.user-profile {
  .avatar {
    width: 60px;
    height: 60px;
  }
  .van-popup {
    background-color: #f5f7f9;
  }
}
</style>
